<template>
    <div>
        <!-- 第一列栅格布局 -->
        <div>
            <el-page-header @back="back" content="新建活码页面">
            </el-page-header>
        </div>
        <div style="height: 30px"></div>
        <el-card style="padding-bottom:20px">
            <el-row>
                <el-col :span="12">
                    <ul>
                        <li>
                            {{ this.rowData.clientGroupName }}
                        </li>
                    </ul>
                    <el-row>
                        <el-col :span="5">
                            <div class="four">
                                <div>{{ this.rowData.memberNum }}</div>
                                群人数
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="four">
                                <div>{{ this.rowData.customerNum }}</div>
                                群内客户数
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="four">
                                <div>{{ this.rowData.joinGroupToday }}</div>
                                今日入群
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="four">
                                <div>{{ this.rowData.quitGroupToday }}</div>
                                今日退群
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <!-- 第二列布局 -->
        <el-card>
            <el-row>
                <el-col :span="24">
                    <div class="title">群人员趋势分析</div>
                    <div class="block">
                        <el-date-picker
                            size="small"
                            v-model="timeValue"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions">
                        </el-date-picker>
                        <el-button size="small" @click="search()">搜索</el-button>
                    </div>
                    <div style="flex: 15;height: 100%">
                        <div style="width: 100%;height: 240px;" ref="lineChart"></div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import * as moment from "moment";

    export default {
        name: "ManageDetail",
        props: {
            rowData: {
                type: Object,
                default() {
                }
            }
        },
        data() {
            return {
                value: new Date(),
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                timeValue: '',
                clientGroup:{}
            }
        },

        mounted() {
            this.productRadioChange(this.aa())
        },
        methods: {
            aa() {
                let result = []
                for (let i = 7; i >=1; i--) {
                    result.push(this.$moment().subtract(i, "days").format("YYYY-MM-DD"))
                }
                return result
            },
            async productRadioChange(dateData) {
                var random1 = [];
                var random2 = [];
                for (let i = 0; i < dateData.length; i++) {
                    let payData = {
                        clientGroupId: this.rowData.clientGroupId,
                        selectDate: dateData[i]
                    }
                    let data = await this.$request("/api/custGroup/getGroupById/1_0", payData, "POST");
                    let listData = data.data
                    random1.push(listData.joinGroupToday)
                    random2.push(listData.quitGroupToday)
                }
                this.initLineChart(this.$refs.lineChart, random1, random2,dateData)
            },

            back() {
                this.$emit("currentHandler", "list")
            },

            initLineChart(ref,random1,random2,dateData) {

                this.chart = this.$echarts.init(ref)
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '5%',
                        top: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateData
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '入群',
                            type: 'line',
                            data: random1
                        },
                        {
                            name: '退群',
                            type: 'line',
                            data: random2
                        }
                    ]
                };
                this.chart.setOption(option)
            },
            search(){
                let dayList = []
                let that = this
                if(this.timeValue == '' || this.timeValue == null){
                    that.$message.error("未选择查询时间")
                    return
                }
                let days = moment(moment(this.timeValue[1])).diff(moment(moment(this.timeValue[0])),'days')
                for (let i = 0; i < days; i++){
                    dayList.push(moment(this.timeValue[0]).subtract(-i, "days").format("YYYY-MM-DD"));
                }
                this.productRadioChange(dayList)
            }
        }
    }
</script>

<style scoped>
    .el-calendar {
        width: 60%;
    }

    ul li {
        list-style: none;
        margin: 10px 0 10px 0;
    }

    ul li span {
        background: rgb(197, 227, 255);
        color: #3a8ee6;
        padding: 2px;
    }

    img {
        width: 100px;
        height: 100px;
        margin-right: 30px;
    }

    .four {
        border: 1px solid #ccc;
        border-radius: 3px;
        color: #aaa;
        text-align: center;
        padding: 20px 0;
        margin: 0 10px;
    }

    .four div {
        color: #3a8ee6;
    }

    .title {
        font-size: 23px;
        margin-bottom: 20px;
    }
</style>
<style>
    .el-calendar-table .el-calendar-day {
        height: 40px
    }
</style>
